@use '@/styles/gobal.scss' as *;

.header {
    width: 100%;
    height: pxToRem(100);
    background-color: $primary-color;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: pxToRem(10) pxToRem(20);

    &__left {
        display: flex;
        align-items: center;
        margin-left: pxToRem(100);
    }

    &__logo {
        width: pxToRem(90);
        aspect-ratio: 1/1;
        object-fit: cover;
    }

    &__title {
        font-size: pxToRem(28);
        color: #fff;
        margin-left: .5em;
    }

    &__middle {
        display: flex;
        align-items: center;
        background-color: #fff;
        height: pxToRem(60);
        border-radius: pxToRem(20);
        padding: pxToRem(5) pxToRem(20);

        &Icon {
            height: 100%;
            aspect-ratio: 1/1;
            object-fit: cover;
            margin-right: pxToRem(20);
        }

        &Input {
            width: pxToRem(560);
            height: 100%;
            background-color: transparent;
            color: #797979;
            font-size: pxToRem(28);
        }

        &Button {
            width: pxToRem(128);
            height: 100%;
            line-height: pxToRem(60);
            text-align: center;
            border-radius: pxToRem(20);
            background-color: $primary-color;
            font-size: pxToRem(24);
            color: #333;
        }
    }

    &__right {
        display: flex;
        align-items: center;

        &Icon {
            width: pxToRem(45);
            aspect-ratio: 1/1;
            object-fit: cover;
            margin-right: pxToRem(50);

            &:hover {
                cursor: pointer;
            }
        }
    }
}